<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery Table 按栏目排序</title>
    <link href="jquerytable/Styles/Site.css" rel="stylesheet" type="text/css" />
    <script src="jquerytable/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="jquerytable/Scripts/JQueryPlugin/TableSort.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#tb").sorttable({
                ascImgUrl: "jquerytable/Images/bullet_arrow_up.png",
                descImgUrl: "jquerytable/Images/bullet_arrow_down.png",
                ascImgSize: "8px",
                descImgSize: "8px",
                sorttingMsg: "数据加载中...",
                sorttingMsgColor: "#FF6600",
                 maskOpacity: "0.6",
                 maskColor:"#D2F1FF",
                onSorted: function (cell) {
                  //  alert(cell.index() + " -- " + cell.text());
                }
            });
        });
    </script>
</head>
<body>
    <div>
        <h1>表格排序插件</h1>

        <fieldset><!--
            <legend> 插件说明 </legend>
            <div>
            <pre>
            ----------------------------[说明]------------------------------
                用于把Table转为可排序的Table

            ----------------------------[使用]------------------------------
                1、给设置标题行添加名自定义属性role="head"
                2、标题行中需要排序的列添加自定义属性sort="true"
                3、调用扩展方法，如：$("#tableId").sorttable();

            --------------------------[配置参数]----------------------------
                sorttingMsg:      排序时显示的文字（默认为"排序中……"）,
                sorttingMsgColor: 排序时显示的文字的颜色（默认为"#FFF"）,
                allowMask:        是否允许遮罩层（默认为true）,
                maskOpacity:      遮罩层的透明度（默认为"0.5"）,
                maskColor:        遮罩层的颜色（默认为"#000"）,
                ascImgUrl:        升序图片（默认为不显示）,
                ascImgSize:       升序图片大小（默认为"8px"）,
                descImgUrl:       降序图片（默认为不显示）,
                descImgSize:      降序图片大小（默认为"8px"）

            --------------------------[回调参数]----------------------------
                onSorted(cell):   排序完成回调函数（参数：cell，当前排序列的头(一般是th或者td的jquery对象)）
            </pre>
            </div>
        --></fieldset>
        
        <br />
        <br />

        <fieldset>
            <legend> 实例 </legend>

            <div>
                <pre>
&lt;script type="text/javascript"&gt;……&lt;/script&gt;
                </pre>
            </div>

            <div>
                <table id="tb" border="0" cellpadding="6" width="100%">
                    <tr role="head" style="background-color: #50C9E7">
                        <th sort="true" style="font-size: 12px">
                            ID整数
                        </th>
                        <th sort="true">
                            随机浮点数
                        </th>
                        <th sort="true">
                            时间
                        </th>
                        <th sort="true">
                            字符串
                        </th>
                        <th sort="true">
                            英文+数字
                        </th>
                        <th sort="true">
                            随机整数
                        </th>
                    </tr>
                     <%for(int i=0;i<150;i++){ %>
                    <tr>
                        <td>
                             <%=i+1 %>
                        </td>
                        <td>
                           <%=i+ 0.6688319%> 
                        </td>
                        <td>
                            2011-4-13 11:11:45
                        </td>
                        <td>
                            陈静
                        </td>
                        <td>
                            <%=10+i %>
                        </td>
                        <td>
                            <%=i/30 %>
                        </td>
                    </tr>
                    <%} %>
                </table>
            </div>
        </fieldset>
    </div>
</body>
</html>